<template>
	<div>
	<div >
		<div class="itemcolor" :style="getColor" @click="find" >
	{{item}}
		</div>
	</div>	
	</div>
</template>

<script>
	export default{
		  props:{
		        item:{
		            type:String,
		            default:[]
		        },
				color:{
					type:Boolean,
					default:true
				},
				index:{
					type:Number
				}
		    },
			computed:{
				getColor(){
				
					if(!this.color){
						return `background-color:#F5F5F5;color:#717171;`;
						
					}else{
						
						let color={
							borderColor:['#EEA6AA','#DD6A4B','98D5D8','#9DBE93','#BCCD99'],
							background:['#F8EAE9','#FFBEC6','#E8F6F6','#E4F5E2','#F2F6E8']
						};
						let index= Math.floor(Math.random()*color.borderColor.length);
						let borderColor=color.borderColor[index];
						let background=color.background[index];
						return `background-color:${background};border-color:${borderColor};border-width:1px;
			border-style: solid;`
					}
				}
			},
			methods:{
				find(){
					if(!this.color){
						console.log(this.index)
						this.$emit('findonkclick',this.index)
					}else{
						console.log(this.index)
						this.$emit('findclick',this.index)
					}
					
				}
			}
	}
</script>

<style scoped>
	.itemcolor{
			background-color: #F5F5F5;
			color: #161717;
			text-align: center;
	margin: 0.3rem;
			padding: 0.5rem;
			
			
		}
</style>
